<script setup>
import lineTable from './components/lineTable.vue'
import ModelForm from './components/ModelForm.vue'
import costModel from './components/costModel.vue'
import addCarModel from './components/addCarModel.vue'
import {ref,reactive,onMounted} from 'vue'

import {postTransportLinePageAPI,deleteTransportLineByIdAPI,postTransportLineTripsAPI} from '@/services/transportLine'
import { getBusinessHallTreeAPI } from '@/services/businessHall'
import { message, Modal } from 'ant-design-vue'

import {postCostConfigurationManagerAPI} from '@/services/configurationManager'
const total = ref(0)
const transportList = ref([])
const params = reactive({
  page: 1,
  pageSize: 10,
  name:null,
  number:null,
  endOrganId:'',
  startOrganId:''
})

const transportLineList =async ()=>{
  const res = await postTransportLinePageAPI(params)
  console.log(res)
    isOpenModal.value = false
  transportList.value = res.data.items
  total.value = Number(res.data.counts)
}

onMounted(()=>{
  transportLineList()
  getTreeData()
})

// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}

//搜索
const seacher=()=>{
    params.page=1
    transportLineList()

}

//重置
const formRef = ref()
const onReset=()=>{
     params.page=1
     params.pageSize=10
     formRef.value.resetFields()
     transportLineList()
}
// 新增/编辑车型
const isOpenModal = ref(false)
// 编辑线路id
const editId = ref('')
// 打开弹出层
const onOpenModal = (id) => {
  // 打开弹出层
  isOpenModal.value = true
  // 保存编辑车型id
  editId.value = id 
  console.log(editId)
}

//成本弹框
const isOpenCost = ref(false)
const openCost=()=>{
    isOpenCost.value = true
}

const onOk =async (obj)=>{
   await postCostConfigurationManagerAPI(obj)
    message.success('成本修改成功')
         isOpenCost.value = false
}

const del =(id)=>{
 if (id) {
    Modal.confirm({
      title: '确认删除该数据吗',
      async onOk() {
        await deleteTransportLineByIdAPI(id)
        transportLineList()
        message.success('删除成功')
      },
    })
  }
}

//车次弹框
const isOpenCar= ref(false)

const addId = ref('')
const addcar =(id)=>{
  isOpenCar.value=true
addId.value = id

console.log(addId)

}

const okCar=async(data)=>{
   const res = await postTransportLineTripsAPI(data)
   console.log(res)
    isOpenCar.value=false
     message.success('新增车次成功')
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card :bodyStyle="{ paddingBottom: 0 }">
      <!-- 表单部分 -->
      <a-form ref="formRef"
      :model="params">
        <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item :name="'number'" :label="'线路编号'">
            <a-input allow-clear placeholder="请输入线路编号" v-model:value="params.number" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :name="'name'" :label="'线路名称'">
            <a-input allow-clear placeholder="请输入线路名称" v-model:value="params.name" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
         <a-form-item :name="'startAgencyId'" :label="'起始地机构'">
          <a-tree-select
            v-model:value="params.startAgencyId"
            :tree-data="treeData"
            placeholder="请选择起始地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
          />
        </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :name="'endAgencyId'" :label="'目的地机构'">
          <a-tree-select
            v-model:value="params.endAgencyId"
            :tree-data="treeData"
            placeholder="请选择目的地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
          />
        </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-space>
            <a-button type="primary" html-type="submit" @click="seacher">搜索</a-button>
            <a-button @click="onReset">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      </a-form>
    </a-card>
    <!-- 按钮组 -->
    <a-card class="radio-card">
      <a-space>
        <a-button type="primary" size="large" @click="onOpenModal()"> 新增线路 </a-button>
        <a-button type="primary" size="large" @click="openCost()">成本设置</a-button>
      </a-space>

      <!-- 表格部分 -->
      <lineTable
      :dataSource="transportList"
       v-model:page="params.page"
        v-model:pageSize="params.pageSize"
         :total="total"
         @change="transportLineList"
         @edit="onOpenModal($event)"
         @del="del"
         @car="addcar"
        
      />
    </a-card>
    <!-- 打开模态框 -->
<ModelForm v-model:open="isOpenModal" :id="editId" @ok="transportLineList()"></ModelForm>
    <!-- 打开成本设置模态框 -->
  <costModel v-model:open="isOpenCost" @ok="onOk"></costModel>

  <!-- 新增车次模态框 -->
  <addCarModel v-model:open="isOpenCar" :id="addId"   @ok="okCar"></addCarModel>
  </a-space>
</template>

<style scoped lang="scss">
.radio-card {
  // 重置卡片样式
  :deep(.ant-card-body) {
    padding: 0;
  }
  // 重置按钮组样式
  :deep(.ant-radio-button-wrapper) {
    width: 120px;
    font-size: 14px;
    text-align: center;
    border-radius: 0;
    border: 0;
    // 隐藏中间分割线
    &::before {
      display: none;
    }
  }
}
</style>
